<template>
  <el-dialog title="添加敏感词" :visible.sync="$attrs.visableIf" @close="handleCloseDialog" :close-on-click-modal="false" :close-on-press-escape="false" append-to-body width="500px">
    <div class="tips">
      多个请按Enter换行，敏感词不可重复， 敏感词最多20个字
    </div>
    <el-form>
      <el-form-item>
        <el-input
            type="textarea"
            v-model="inputContent"
            placeholder="请输入敏感词"
        ></el-input>
      </el-form-item>
    </el-form>
    <div class="footer-btn" slot="footer">
      <el-button @click="handleCloseDialog">取消</el-button>
      <el-button type="primary" @click="submitData">提交</el-button>
    </div>
  </el-dialog>
</template>

<script>
export default {
  data() {
    return {
      inputContent: '',
      errorMessage: '',
      sensitiveWords: [],
    };
  },
  methods: {
    handleCloseDialog() {
      this.$emit('update:visableIf', false);
      this.$emit('handleQuery');
    },
    submitData() {
      // 使用换行符分割输入的数据
      const lines = this.inputContent.split('\n');
      console.log('多行数组', lines); // 这里你会得到一个包含多条数据的数组
      lines.forEach(item => {
        if (item.length > 20) {
          this.$message({
            message: '敏感词不能超过20个字',
            type: 'warning'
          });
          return;
        }
      })
      let list=[...new Set(lines)];
      console.log('去重处理',list);
      // 处理数据...
    }
  },
};
</script>
<style lang="scss" scoped>
::v-deep .el-textarea__inner {
  height: 200px;
}
.tips {
  position: absolute;
  left: 120px;
  top:15px;
  font-size: 12px;
  color: #ccc;
}
</style>
